<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>HTML 5 Mobile Demo</title>

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <script type="text/javascript" src="/resources/js/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="/resources/js/kinetic2d-v1.0.0.js"></script>
    <script type="text/javascript" src="/resources/js/jquery.mobile-1.0b1.js"></script>

    <script type="text/javascript">
        var kin;
        var pos = {x:0, y:0};
        var delta = {x:0, y:0};
        var canvas;
        var contextWidth;
        var contextHeight;
        var isSelected = false;


        $(function(){
            document.addEventListener('touchmove', function(e) {
                e.preventDefault()
            }, false);

            initStage();

            $('body').bind('orientationchange',function(event){
                initStage();
            });

            canvas = document.getElementById("myCanvas");

        });

        function initStage() {
            kin = new Kinetic_2d("myCanvas");
            var canvas = $("#myCanvas");
            $("#myCanvas").attr("width", window.innerWidth);
            $("#myCanvas").attr("height", (window.innerHeight - 64));

            contextWidth = $("#myCanvas").attr("width");
            contextHeight = $("#myCanvas").attr("height");

            kin.setDrawStage(function(){
                kin.clear();

                canvas.width = canvas.width;

                var context = kin.getContext();

                var placeWidth = contextHeight / 2;

                kin.beginRegion();
                context.beginPath();
                context.lineWidth = 1;
                context.strokeStyle = "black";
                if (!isSelected) {
                    context.fillStyle = "#ff0000";
                } else {
                    context.fillStyle = "#00ff00";
                }

                // draw rectangle
                context.moveTo(contextWidth/2 - placeWidth/2 + delta.x, contextHeight/2 - placeWidth/2 + delta.y);
                context.lineTo(contextWidth/2 - placeWidth/2 + delta.x + placeWidth, contextHeight/2 - placeWidth/2 + delta.y);
                context.lineTo(contextWidth/2 - placeWidth/2 + delta.x + placeWidth, contextHeight/2 - placeWidth/2 + delta.y + placeWidth);
                context.lineTo(contextWidth/2 - placeWidth/2 + delta.x, contextHeight/2 - placeWidth/2 + delta.y + placeWidth);
                context.lineTo(contextWidth/2 - placeWidth/2 + delta.x, contextHeight/2 - placeWidth/2 + delta.y);
                context.closePath();
                context.fill();
                context.stroke();

                kin.addRegionEventListener("onmouseover", function(){
                });

                kin.addRegionEventListener("onmouseout", function(){
                });

                kin.addRegionEventListener("onmousemove", function(){
                });

                kin.addRegionEventListener("onmousedown", function(){
                    event.preventDefault();

                    isSelected = !isSelected;
                });
                kin.closeRegion();
            });
        }

        function onMouseDown(event) {
            event.preventDefault();

            console.log("onMouseDown");
            pos.x = event.pageX;
            pos.y = event.pageY;

            canvas.addEventListener('mousemove', onMouseMove, false);
            canvas.addEventListener('mouseup', onMouseUp, false);
        }

        function onMouseMove(event) {
            event.preventDefault();

            console.log("onMouseMove");
            handleMoving(event.pageX, event.pageY);
        }

        function onMouseUp(event) {
            event.preventDefault();

            canvas.removeEventListener('mousemove', onMouseMove, false);
            canvas.removeEventListener('mouseup', onMouseUp, false);
        }

        function onTouchStart(event) {
            event.preventDefault();

            pos.x = event.targetTouches[0].pageX;
            pos.y = event.targetTouches[0].pageY;

            canvas.addEventListener('touchmove', onTouchMove, false);
            canvas.addEventListener('touchend', onTouchEnd, false);
            canvas.addEventListener('touchcancel', onTouchCancel, false);
        }

        function handleMoving(pageX, pageY) {
            delta.x += (-pos.x + pageX);
            delta.y += (-pos.y + pageY);
            kin.drawStage();
            pos.x = pageX;
            pos.y = pageY;
        }


        function onTouchMove(event) {
            event.preventDefault();

            handleMoving(event.targetTouches[0].pageX, event.targetTouches[0].pageY);
        }

        function onTouchEnd(event) {
            event.preventDefault();

            canvas.removeEventListener('touchmove', onTouchMove, false);
            canvas.removeEventListener('touchend', onTouchEnd, false);
            canvas.removeEventListener('touchcancel', onTouchCancel, false);
        }

        function onTouchCancel(event) {
            event.preventDefault();

            canvas.removeEventListener('touchmove', onTouchMove, false);
            canvas.removeEventListener('touchend', onTouchEnd, false);
            canvas.removeEventListener('touchcancel', onTouchCancel, false);
        }

        function enableSelect() {
            canvas.removeEventListener("touchstart", onTouchStart, false);
            canvas.removeEventListener("mousedown", onMouseDown, false);
        }

        function enablePan() {
            canvas.addEventListener("touchstart", onTouchStart, false);
            canvas.addEventListener("mousedown", onMouseDown, false);
        }
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
       button {
           margin: 0;
           height: 27px;
           font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
           font-size: 12px;
           background: #e9e9e9;
           background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#CACACA));
           background: -moz-linear-gradient(top, #FEFEFE, #CACACA);
           border: 1px solid #000;
           -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
           box-shadow: 0 1px 2px rgba(0,0,0,0.2);
           cursor: pointer;
       }
         /* disable copy and paste, tap highlighting, text resize and callout popups */
        * {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-text-size-adjust: none;
            -webkit-touch-callout: none;
        }

    </style>
</head>
<body>
    <div style="width: 100%; height: 64px; background-color: #aaaaaa;">
        <button onclick="enablePan()" style="height: 52px;">Enable Pan</button>
        <button onclick="enableSelect()" style="height: 52px;">Enable Select</button>
    </div>
    <canvas id="myCanvas"></canvas>
</body>
</html>